<template>
  <div>
    <Table
      ref="dataTable"
      stripe
      :loading="table.loading"
      :columns="table.tableColumns"
      :data="table.tableRows"
      style="margin-top:20px;"
      @on-select="select" @on-select-cancel="selectCancel"
               @on-select-all="selectAll" @on-select-all-cancel="selectAllCancel"
      @on-sort-change="changeSort"
    ></Table>
    <div style="margin: 20px; overflow: hidden">
      <div style="float: right;">
        <Page
          :total="pager.total"
          :current="pager.pageNo"
          @on-change="changePageNo"
          @on-page-size-change="changePageSize"
          showSizer
          showTotal
        ></Page>
      </div>
    </div>
    <ImgModal ref="imgModal" />
  </div>
</template>

<script>
import * as utils from '@/api/utils-v2'
import ImgModal from '_c/img-modal'

import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
const cdnUrl = config.baseUrl.cdnUrl

export default {
  name: 'AdvertisementTableMain',
  components: {
    ImgModal
  },
  data() {
    return {
      urls: {
        searchUrl: '/advertisement/admin/pager-cond',
        activeUrl: '/advertisement/admin/active',
        removeUrl: '/advertisement/admin/remove/'
      },
      pager: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
		dataDictCodes: ['IS_ACTIVE','ADVERTISEMENT_TYPE'],
		dataDictItems: {},
      searchOpts: {
        sortColumn: null,
        sortOrder: null
      },
      table: {
        loading: false,
        tableColumns: [
          {
            type: 'selection',
            width: 52,
            key: 'id',
            align: 'center',
            fixed: 'left'
          },
          {
            width: 60,
            align: 'center',
            fixed: 'left',
            render: (h, params) => {
              return h(
                'span',
                params.index + (this.pager.pageNo - 1) * this.pager.pageSize + 1
              )
            }
          },
          {
            title: '广告编号',
            key: 'id',
            minWidth: 120,
            sortable: true
          },
          {
            title: '广告类型编号',
            key: 'adTypeId',
            minWidth: 120,
            sortable: true,
            render: (h, params) => {
						  return h(
						    'Dropdown',
						    {
						      on: {
						        'on-click': itemName => {
						          this.userOpt(itemName, params.row)
						        }
						      },
						      props: {
						        transfer: true
						      }
						    },
						    [
						      h('span', [
						        params.row.adTypeId,
						        h('Icon', {
						          props: {
						            type: 'ios-list',
						            size: '25'
						          }
						        })
						      ]),
						      h(
						        'DropdownMenu',
						        {
						          slot: 'list'
						        },
						        [
						          h(
						            'DropdownItem',
						            {
						              props: {
						                name: 'moduleDetail'
						              }
						            },
						            '详情'
						          ),
						          h(
						            'DropdownItem',
						            {
						              props: {
						                name: 'moduleSearch'
						              }
						            },
						            '搜索'
						          )
						        ]
						      )
						    ]
						  )
						}
          },
          {
            title: '广告标题',
            key: 'title',
            minWidth: 120,
            sortable: true
          },
          // {
          //   title: '广告URL',
          //   key: 'adUrl',
          //   minWidth: 120,
          //   sortable: true,
          //   renderHeader: (h, params) => {
          //     return h('span', [
          //       h('span', '广告URL'),
          //       h(
          //         'Tooltip',
          //         {
          //           props: {
          //             content: '广告内容对应的URL地址',
          //             placement: 'top',
          //             transfer: true,
          //             maxWidth: 500
          //           }
          //         },
          //         [
          //           h('Icon', {
          //             props: {
          //               type: 'ios-help-circle'
          //             },
          //             style: {
          //               marginLeft: '3px'
          //             }
          //           })
          //         ]
          //       )
          //     ])
          //   }
          // },
          {
            title: '广告形式',
            key: 'adType',
            minWidth: 120,
            sortable: true,
            renderHeader: (h, params) => {
                        return h('span', [
                          h('span', '广告形式'),
                          h('Tooltip', {
                            props: {
                              content: '0图片，1视频',
                              placement: 'top',
                              transfer: true,
                              maxWidth: 500
                            }
                          }, [
                            h('Icon', {
                              props: {
                                type: 'ios-help-circle'
                              },
                              style: {
                                marginLeft: '3px'
                              }
                            })
                          ])
                        ])
                      },
					  render: (h, params) => {
					      let dictItem = utils.getDataDictItemDisplayValue(this, 'ADVERTISEMENT_TYPE', params.row.adType)
					    return h('Tag',{
					      props: {
					        color:params.row.adType ==null ? "#ed4014" : dictItem.color
					      }
					    },params.row.adType ==null ? "未知": dictItem.displayValue) 
					  }
                     
          },
          {
            title: '广告内容',
            key: 'adUrl',
            minWidth: 120,
            sortable: true,
            render: (h, params) => {
              let imgSrc = params.row.adUrl
              if (!imgSrc) {
                return h('span',{},'暂无')
              }
              if (params.row.adType === 1) {
                return h('span',{},'视频')
              }
              if (imgSrc.indexOf('http') < 0) {
                imgSrc = cdnUrl + '/' + imgSrc
                return h(
                  'img',
                  {
                    attrs: {
                      src: imgSrc
                    },
                    style: {
                      width: '60px',
                      height: '60px',
                      cursor: 'pointer'
                    },
                    on: {
                      click: () => {
                        this.showImgModal(imgSrc)
                      }
                    }
                  },
                  ''
                )
              }
            }
          },
          {
            title: '广告顺序',
            key: 'adOrder',
            minWidth: 120,
            sortable: true,
            renderHeader: (h, params) => {
              return h('span', [
                h('span', '广告顺序'),
                h(
                  'Tooltip',
                  {
                    props: {
                      content: '广告显示的顺序',
                      placement: 'top',
                      transfer: true,
                      maxWidth: 500
                    }
                  },
                  [
                    h('Icon', {
                      props: {
                        type: 'ios-help-circle'
                      },
                      style: {
                        marginLeft: '3px'
                      }
                    })
                  ]
                )
              ])
            }
          },
          {
            title: '背景颜色',
            key: 'backgroundColor',
            minWidth: 120,
            sortable: true,
            renderHeader: (h, params) => {
              return h('span', [
                h('span', '背景颜色'),
                h(
                  'Tooltip',
                  {
                    props: {
                      content: '可使用十六进制或RGB颜色',
                      placement: 'top',
                      transfer: true,
                      maxWidth: 500
                    }
                  },
                  [
                    h('Icon', {
                      props: {
                        type: 'ios-help-circle'
                      },
                      style: {
                        marginLeft: '3px'
                      }
                    })
                  ]
                )
              ])
            },
            render: (h, params) => {
              const color = params.row.backgroundColor
              if (!color) {
                return h('span',{},'暂无颜色')
              }
              return h('span',{
                style: {
                  backgroundColor: color,
                  padding: '10px'
                }
              },color)
            }
          },
          {
            title: '关联页面链接',
            key: 'linkPageUrl',
            minWidth: 120,
            sortable: true
          },
          {
            title: '关联页面参数',
            key: 'linkParams',
            minWidth: 120,
            sortable: true
          },
          {
            title: '版本号',
            key: 'version',
            minWidth: 120,
            sortable: true,
            renderHeader: (h, params) => {
              return h('span', [
                h('span', '版本号'),
                h(
                  'Tooltip',
                  {
                    props: {
                      content: '广告版本号',
                      placement: 'top',
                      transfer: true,
                      maxWidth: 500
                    }
                  },
                  [
                    h('Icon', {
                      props: {
                        type: 'ios-help-circle'
                      },
                      style: {
                        marginLeft: '3px'
                      }
                    })
                  ]
                )
              ])
            }
          },
          {
            title: '创建时间',
            key: 'createTime',
            minWidth: 120,
            sortable: true,
            renderHeader: (h, params) => {
              return h('span', [
                h('span', '创建时间'),
                h(
                  'Tooltip',
                  {
                    props: {
                      content: '广告创建时间',
                      placement: 'top',
                      transfer: true,
                      maxWidth: 500
                    }
                  },
                  [
                    h('Icon', {
                      props: {
                        type: 'ios-help-circle'
                      },
                      style: {
                        marginLeft: '3px'
                      }
                    })
                  ]
                )
              ])
            }
          },
          {
            title: '更新时间',
            key: 'updateTime',
            minWidth: 120,
            sortable: true,
            renderHeader: (h, params) => {
              return h('span', [
                h('span', '更新时间'),
                h(
                  'Tooltip',
                  {
                    props: {
                      content: '广告更新时间',
                      placement: 'top',
                      transfer: true,
                      maxWidth: 500
                    }
                  },
                  [
                    h('Icon', {
                      props: {
                        type: 'ios-help-circle'
                      },
                      style: {
                        marginLeft: '3px'
                      }
                    })
                  ]
                )
              ])
            }
          },
          {
            title: '是否激活',
            key: 'isActive',
            minWidth: 120,
            sortable: true,
            renderHeader: (h, params) => {
              return h('span', [
                h('span', '是否激活'),
                h(
                  'Tooltip',
                  {
                    props: {
                      content: '广告是否激活',
                      placement: 'top',
                      transfer: true,
                      maxWidth: 500
                    }
                  },
                  [
                    h('Icon', {
                      props: {
                        type: 'ios-help-circle'
                      },
                      style: {
                        marginLeft: '3px'
                      }
                    })
                  ]
                )
              ])
            },
			render: (h, params) => {
			        let dictItem = utils.getDataDictItemDisplayValue(this, 'IS_ACTIVE', params.row.isActive)
			        return h('span', dictItem.displayValue)
			 }
          },

          {
            title: '激活状态',
            key: 'isActive',
            minWidth: 100,
            align: 'center',
            render: (h, params) => {
              if (params.row.isActive === 0) {
                return h('Tooltip', {
                  props: {
                    content: '点击冻结',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Button', {
                    props: {
                      type: 'success',
                      size: 'small'
                    },
                    on: {
                      'click': () => {
                        this.active(params.row)
                      }
                    }
                  }, '激活')
                ])
              } else {
                return h('Tooltip', {
                  props: {
                    content: '点击激活',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Button', {
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                    on: {
                      'click': () => {
                        this.active(params.row)
                      }
                    }
                  }, '冻结')
                ])
              }
            }
          },
          {
            title: '操作',
            key: 'action',
            width: 130,
            align: 'center',
            fixed: 'right',
            render: (h, params) => {
              return h(
                'Dropdown',
                {
                  on: {
                    'on-click': itemName => {
                      this.userOpt(itemName, params.row)
                    }
                  },
                  props: {
                    transfer: true
                  }
                },
                [
                  h(
                    'Button',
                    {
                      props: {
                        type: 'primary',
                        size: 'small'
                      }
                    },
                    [
                      '选择操作 ',
                      h('Icon', {
                        props: {
                          type: 'ios-arrow-down'
                        }
                      })
                    ]
                  ),
                  h(
                    'DropdownMenu',
                    {
                      slot: 'list'
                    },
                    [
                      h(
                        'DropdownItem',
                        {
                          props: {
                            name: 'showEdit'
                          }
                        },
                        '编辑'
                      ),
                      h(
                        'DropdownItem',
                        {
                          props: {
                            name: 'showDetail'
                          }
                        },
                        '详情'
                      ),
                      h(
                        'DropdownItem',
                        {
                          props: {
                            name: 'remove'
                          }
                        },
                        [
                          h(
                            'span',
                            {
                              style: {
                                color: 'red'
                              }
                            },
                            '删除'
                          )
                        ]
                      ),
                      h(
                        'DropdownItem',
                        {
                          props: {
                            name: 'showUploadModal'
                          }
                        },
                        '上传广告图片'
                      ),
                      h(
                        'DropdownItem',
                        {
                          props: {
                            name: 'showUploadModalVideo'
                          }
                        },
                        '上传广告视频'
                      )
                    ]
                  )
                ]
              )
            }
          }
        ],
        tableRows: [],
        selections: []
      }
    }
  },
  computed: {},
  mounted() {
    this.search()
  },
  methods: {
    search() {
      this.$emit('searchTable')
    },
    userOpt(itemName, row) {
      if (itemName === 'showEdit') {
        this.$emit('showEditModal', JSON.parse(JSON.stringify(row)))
      } else if (itemName === 'showDetail') {
        this.$emit('showDetailModal', JSON.parse(JSON.stringify(row)))
      } else if (itemName === 'remove') {
        utils.remove(this, row)
      } else if (itemName === 'showUploadModal') {
        this.$emit('showUploadModal', row)
      } else if (itemName === 'showUploadModalVideo') {
        this.$emit('showUploadModalVideo', row)
      } else if (itemName === 'moduleDetail') {
        this.$emit('showModuleDetail', row.adTypeId)
      } else if (itemName === 'moduleSearch') {
        this.$emit('showModuleSearch')
      }
    },
    active(row) {
      utils.active(this, row)
    },
    select(selections, row) {
              utils.select(this, selections, row)
            },
            selectCancel(selections, row) {
              utils.selectCancel(this, selections, row)
            },
            selectAll(selections) {
              utils.selectAll(this, selections)
            },
            selectAllCancel(selections) {
              utils.selectAllCancel(this, selections)
            },
    changeSort(sortColumn) {
      utils.changeSort(this, sortColumn)
    },
    changePageNo(pageNo) {
      utils.changePageNo(this, pageNo)
    },
    changePageSize(pageSize) {
      utils.changePageSize(this, pageSize)
    },
    /**
     * 显示图片预览的弹窗
     */
    showImgModal(src) {
      let imgModal = this.$refs.imgModal
      imgModal.modal.img = true
      imgModal.imgSrc = src
    }
  }
}
</script>

<style>
</style>
